<!--
 * @Author:刘翔
 * @Date: 2024-09-09 14:46:36
 * @LastEditTime: 2024-11-26 11:20:23
 * @LastEditors: your name
 * @Description:病组为例
 * @FilePath: \建达文件\建达科技项目\医保DRG老系统\mrismodulecash\lib\views\report\drgRunReport\pageTile20_1\pageTile20_1.vue
-->

<template>
  <div class="page-tile-20-1">
    <div class="page-tile-20-1-top">
      <div
        class="echarts-box"
        ref="echartsRefs"
      ></div>
    </div>
    <div class="page-tile-20-1-bottom">
      <formList
        class="formList"
        :formParameter="formParameter"
        :data_list="data_list"
      />
    </div>
  </div>
</template>

<script>
import formList from '../components/formList/formList2'
import * as echarts from 'echarts'

export default {
  // 组件名称
  name: 'pageTile20_1',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    formList
  },
  // 组件状态值
  data() {
    return {
      data_list: [],
      formParameter: [
        { title: '主诊断' },
        { title: '主手术' },
        { title: '医疗总费用', highlightValue: '医疗总费用是否标红' },
        { title: '医保支付', highlightValue: '医保支付是否标红' },
        { title: '超支结余', highlightValue: '超支结余是否标红' }
        // { width: '8%', title: "医保均费", highlightValue: "医保均费是否标红" },
        // { width: '8%', title: "耗材费", highlightValue: "耗材费是否标红" },
        // { width: '8%', title: "药品费", highlightValue: "药品费是否标红" },
        // { width: '8%', title: "检验检查费", highlightValue: "检验检查费是否标红" },
        // { width: '8%', title: "医疗服务费", highlightValue: "医疗服务费是否标红" }
      ]
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    init(data) {
      this.data_list = data
      this.initEchart()
    },
    initEchart() {
      let xAxisData = []
      let seriesColor = ['#5c7bd9', '#ee6666', '#ffb672', '#91cc75']
      let seriesKey = ['耗材费', '药品费', '检验检查费', '医疗服务费']
      let series = []
      this.data_list.forEach((item, index) => {
        xAxisData.push('病例' + (index + 1))
        for (let key in item) {
          if (item[key] && item[key].indexOf('.') !== -1) {
            //费用小于0标红
            if (item[key] * 1 < 0) item[key + '是否标红'] = true
            item[key] = (item[key] * 1).toFixed(2)
          }
        }
      })

      seriesKey.forEach((item1, index) => {
        let itemData = []
        this.data_list.forEach((item2, index2) => {
          itemData.push(item2[item1])
        })
        series.push({
          name: item1,
          type: 'bar',
          stack: 'total',
          barWidth: '60%',
          data: itemData,
          label: {
            show: true,
            fontSize: 18,
            position: 'inside',
            formatter: '{c}'
          },
          itemStyle: {
            color: seriesColor[index]
          }
        })
      })
      let myChart = echarts.init(this.$refs.echartsRefs)
      let option
      option = {
        legend: {
          selectedMode: false,
          data: seriesKey,
          textStyle: {
            fontSize: 24
          }
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisLabel: {
              show: true,
              fontSize: 18
            }
          },
          {
            type: 'category',
            data: xAxisData,
            show: false,
            boundaryGap: false,
            axisLabel: {
              show: true,
              fontSize: 18
            }
          }
        ],
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            fontSize: 18,
            color: '#8e8e8e'
          }
        },
        series: [
          ...series,
          {
            xAxisIndex: 1,
            name: 'Highest',
            type: 'line',
            data: [this.data_list[0]['医保均费']],
            label: {
              show: true,
              formatter: () => {
                return '医保均费'
              },
              position: [30, -60],
              borderWidth: 20,
              color: '#fff',
              fontSize: 24,
              backgroundColor: '#b82a19',
              borderColor: '#b82a19',
              borderRadius: 2
            },
            markLine: {
              symbol: ['none', 'none'],
              lineStyle: {
                color: 'red',
                type: 'dashed',
                width: 5
              },
              data: [
                {
                  yAxis: this.data_list[0]['医保均费']
                }
              ]
            }
          }
        ]
      }
      option && myChart.setOption(option)
    }
  },
  created() {},
  mounted() {}
}
</script>

<style lang="less" scoped>
.page-tile-20-1 {
  height: 100%;
  .page-tile-20-1-top {
    height: 60%;
    .echarts-box {
      width: 100%;
      height: 100%;
    }
  }
  .page-tile-20-1-bottom {
    height: 40%;
  }
}
</style>
